<template>

	<view class="page-wapper ">
			<view class="" style="height: 44rpx;">
				
			</view>
			<view class="status-bar">
			
			</view>
			
		
			<view class="titleinfo-wapper ss-flex-col ss-col-center">
				<image src="/static/logo1.jpg" class="logo" mode="heightFix"></image>
				<view class="title">
					欢迎注册福运精选
				</view>
			</view>
			<view class="bottom-wapper">
				<u-form ref="formdom" label-position="top" errorType="toast" style="margin-top:30rpx;padding: 0 53rpx;"
					:model="state.formdata" :rules="rules">
				
					<u-form-item prop="mobile" >
						<view class="login_input">
							<image src="/static/icon_amount.png" class="lefticon" mode="heightFix"></image>
							<input class="back_1 flex-1" v-model="state.formdata.mobile" maxlength="11" placeholder="请输入手机号" />
					
						</view>
					
					</u-form-item>
					<u-form-item prop="password" >
						<view class="login_input">
							<image src="/static/icon_password.png" class="lefticon" mode="heightFix"></image>
							<input class="back_1" type="password" v-model="state.formdata.password"   placeholder="请输入密码"  />
							
						</view>
				
					</u-form-item>
					
					<u-form-item prop="code">
						<view class="login_input">
							<image src="/static/icon_password.png" class="lefticon" mode="heightFix"></image>
							<input class="back_1" type="text" v-model="state.formdata.code" placeholder="验证码" />
					
							<view class="code-button" @tap="getCode" >
								{{state.tips}}
							</view>
					
						</view>
					
					</u-form-item>
				
				
				
				
				
				</u-form>
				
				<view class="ss-flex ss-col-center" style="margin-top: 30rpx;">
					<view class="chack-wapper ss-flex ss-row-center">
					<image :src="state.agreen?'/static/icon_checked.png':'/static/icon_check.png' " @tap="state.agreen=!state.agreen" class="checkicon" mode=""></image>已阅读并同意<span @tap="richtextPop1.open({id:'yhxy',title:'福运精选相关协议'})">《福运精选相关协议》</span>
					</view>
				
				</view>
				
			
				
			</view>
			
		
	
	
	
	<view  style="padding: 0 50rpx;">
				<button class="logo-button" @tap="onsubmit">注册 </button>
	</view>
	
	<view class="qzc">
			已有账号？<span @tap="LC.$router.go('/pages/auth/login',true)">立即登录</span>
			</view>
	<u-code :seconds="60" ref="codedom"  @change="codeChange"></u-code>
	
			<!-- <view class="grey_1 b_buttom center_between">
				<span @tap="kf">{{$t('zxkf')}}</span>
				<span @tap="LC.$router.go('/pages/login/forget')">{{$t('wjmm')}}？</span>
			</view> -->
		<!-- 	<view class="bottom_tip grey_2">
				<view class="trid ss-flex-col ss-col-center">
					<view class="title">
						<span class="line"></span>
						<span>or</span>
						<span class="line"></span>
					</view>
					<view class="trid_login ss-flex ss-row-between">
						
						<view class="item ">
							<image src="@/static/icon_apple.png" mode=""></image>
							
						</view>
						<view class="item ">
							<image src="@/static/icon_google.png" mode=""></image>
							
						</view>
						<view class="item ">
							<image src="@/static/icon_facebook.png" mode=""></image>
							
						</view>
					
					</view>
				</view>
			
			</view>
		 -->
	<richtextPop ref="richtextPop1"></richtextPop>
		</view>
</template>

<script setup>
	import richtextPop from './richtext_pop.vue'
	import LC from '@/LC'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'

	import {
		openkf
	} from '../../utils/kf.js';



	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue'
	let info = computed(() => LC.$store('app').info)
	let logintype = ref('email')


	
	onLoad(({
		code
	}) => {
		if (code) {
			state.formdata.invite_code=code
		}
	})
let richtextPop1 = ref(null)

	const rules = {
	
		mobile: [{
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			},
			{
					validator: (rule, value, callback) => {
									// 上面有说，返回true表示校验通过，返回false表示不通过
									// uni.$u.test.mobile()就是返回true或者false的
									return uni.$u.test.mobile(value);
								},
					message: "手机号格式不正确",
					trigger: ['blur', 'change']
				}
		],
		code:[{
			required: true,
			message: '请输入验证码',
			trigger: ['blur', 'change']
		}],
		password: [{
			required: true,
			message: '请输入注册密码',
			trigger: ['blur', 'change']
		},
		{
			min:6,
			max:10,
			message:"长度6-10位",
			trigger: ['blur', 'change']
		}
		],
		
	}


	function changetab({
		index
	}) {

		state.logintype = list1.value[index].value
	}

	//表单
	let state = reactive({

		ishow: false,
		ishow1: false,
		tips: '',
		formdata: {
			mobile: "",
			password: '',
			code: '',
			
		
		},

	})

	let formdom = ref(null)



	function codeChange(text) {

		state.tips = text;
	}
	let codedom = ref(null)

	async function getCode() {

		if (codedom.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({

			})
			await LC.$api.user.smssend({
				mobile: state.formdata.mobile,
				type: 1
			})
			codedom.value.start();
			uni.hideLoading({

			})
		} else {
			uni.hideLoading({

			})

		}




	}

	function onsubmit() {
		if(!state.agreen){
			uni.$u.toast('请勾选协议')
			return
		}
		formdom.value.validate().then(res => {
			send()
		}).catch(err => {
			formdom.value.clearValidate()

			console.log('表单错误信息：', err);
		})
	}
	async function send() {

		const res = await LC.$api.user.register(state.formdata)
		if (res.code == 1) {
		LC.$store('user').setToken(res.data.token)
		uni.reLaunch({
			url: '/pages/index/index',
			success() {
				uni.$u.toast('成功')
			}
		})
		}


	}
	let inputtype = ref('password')

	function clearevent(b) {
		formData[b] = ''
	}

	function changePasswordView() {
		inputtype.value = inputtype.value === 'password' ? 'text' : 'password'

	}

	function tolangset() {
		LC.$router.go('/pages/user/langset')

	}

	function kf() {
		openkf()
	}
</script>

<style lang="scss">
	.bottom-wapper{
			    background: #fff;
			    border-radius: 82rpx 82rpx 0px 0px;
			    position: relative;
			    margin-top: 80rpx;
			    padding: 46rpx 0px;
		}
	.logo-button{
		
			
			height: 86rpx;
			
			margin-bottom: 59rpx;
			flex-shrink: 0;
			margin-top: auto;
			background:linear-gradient( 90deg, #FB5351 0%, #FF7352 100%);
			border-radius: 42px;
			font-weight: 400;
			font-size: 27rpx;
			width: 100%;
			line-height: 86rpx;
			color: #fff;
		margin-top: 73rpx;
			&.dis {
				background-color: #CCCCCC;
			}
		
			&::after {
				display: none;
			}
	
		
	}

	.chack-wapper {
		.checkicon {
			width: 34rpx;
			height: 34rpx;
			margin-right: 15rpx;
		}

		padding: 0 50rpx;
		font-family: PingFangSC,
		PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 32rpx;

		span {
			color: #FC5652;
		}

	}

	.forget {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #FC5652;
		
		line-height: 32rpx;
		text-align: left;
		display: flex;
		padding: 0 50rpx;
		justify-content: flex-end;
	}
	.code-button{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #FC5652;
	}
	.titleinfo-wapper{
		padding: 17rpx 59rpx;
		
		.logo{
			width: 273rpx;
			height: 226rpx;
		}
		.title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 800;
		
			margin-top: 40rpx;
			line-height: 32rpx;
		}
	}

	.page-wapper{
		min-height: 100vh; /*給 Safari 以外的瀏覽器讀取*/
	
		display: flex;
		background:url('/static/loginbg.jpg');
		padding-bottom: 1rpx;
		flex-direction: column;
		background-color: #fff;
		
		background-repeat: no-repeat;
		background-size:100vw 527rpx;
	}
	

	.top_icon {
		padding: 0 30rpx;
		box-sizing: border-box;

		.icon {
			width: 46rpx;
			height: 46rpx;
			margin-left: 48rpx;
		}

	}

	

	.qzc {
		display: flex;
		justify-content: center;
		font-size: 23rpx;
		font-weight: 400;
		
		color: #999999;
		line-height: 32rpx;

		span {
			color: #FC5652;
			text-decoration: underline;
		}
	}

	.titlephone {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 31rpx;
		color: #131313;
		line-height: 42rpx;
		margin-bottom: 60rpx;
	}

	::v-deep.uni-forms-item {
		margin-bottom: 60rpx;

	}

	::v-deep .u-form-item__body {
		padding: 15rpx 0;
	}

	::v-deep .uni-forms {
		margin: 0rpx 0;
	}

	.login_input {
		display: flex;
		width: 100%;
		height: 86rpx;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: #F7F8FA;
		border-radius: 63rpx;
		opacity: 1;

		.lefticon {
			height: 32rpx;
			width: 32rpx;
			// u-icon {
			// 	margin-left: 5rpx;
			// }
		}

		input {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #999999;
			line-height: 38rpx;
			margin-left: 15rpx;
			flex: 1
		}

		.pass_view {
			width: 31rpx;
		}

	}

	.b_buttom {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		margin-top: 38rpx;
	}

	.title {
		margin-top: 60rpx;
		font-size: 48rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #292929;
		line-height: 66rpx;

		.subtitle {
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #9FA4A0;
		}
	}

	.tab {
		display: flex;
	}

	.tab_item {
		padding-right: 60rpx;
		color: #9FA4A0;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		align-items: center;

		&>span:nth-child(2) {
			margin-top: 6rpx;
			display: none;
			width: 32rpx;
			height: 8rpx;
			background: #00807D;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;

		}
	}

	.tab_isactive {
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #00807D;

		&>span:nth-child(2) {
			display: block;


		}

	}

	.login-buttom {
		height: 112rpx;
		background: linear-gradient(270deg, #09AA8C 0%, #00807D 100%);
		border-radius: 160rpx 160rpx 160rpx 160rpx;
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 112rpx;

	}

	.top_tittle {
		height: 88rpx;

		.left {
			width: 56rpx;
			height: 56rpx;
		}

		.right {
			image {
				width: 46rpx;
				height: 46rpx;
				margin-right: 5rpx;
			}

			font-size: 36rpx;
			font-family: DINPro-Medium,
			DINPro;
			font-weight: 500;
		}
	}
</style>